<template>
  <div id="styAdd">
    <div id="mainBox">
      <div id="boxTit">
        <span class="tit">附加值列表</span>
        <i
          class="el-icon-circle-plus-outline"
          @click="appends"
        />
      </div>
      <el-table
        :data="tableData"
        border
        style="width: auto"
      >
        <el-table-column
          label="选择"
          type="selection"
          width="30"
        />

        <el-table-column
          prop="name"
          label="附加值名称"
          width="180"
        />
        <el-table-column
          prop="decrypt"
          label="附加值描述"
          width="180"
        />
        <el-table-column
          label="操作"
          width="150"
        >
          <template slot-scope="scope">
            <el-button
              type="text"
              size="small"
              @click="update(scope.row.id)"
            >修改</el-button>
            <el-button
              type="text"
              size="small"
              @click="deletes(scope.row.id)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- <el-pagination
        small
        layout="prev, pager, next"
        @prev-click="prePage"
        @next-click="nextPage"
        @current-change="currentChange"
        :page-size="5"
        :total="total"
      >
      </el-pagination> -->
    </div>
  </div>
</template>
<script>
import { tsdList, tsdDelete } from '@/api/page'

export default {
  data() {
    return {
      tableData: []
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    appends() {
      this.$router.push('/style/append')
      localStorage.setItem('styAdd', true)
      localStorage.setItem('styId', '')
    },
    update(a) {
      this.$router.push('/style/append')
      localStorage.setItem('styAdd', false)
      localStorage.setItem('styId', a)
    },
    deletes(a) {
      var data = {}
      data.id = a
      data.mid = localStorage.getItem('mid')
      tsdDelete(data).then(response => {
        if (response.data.code == 'SUCCESS') {
          this.openFullScreen()
          setTimeout(() => {
            this.init()
            this.loading.close()
          }, 1000)
        }
      })
    },
    openFullScreen() {
      this.loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
    },
    init() {
      var data = {
        condition: {
          mid: localStorage.getItem('mid')
        }
      }
      tsdList(data).then(response => {
        if (response.data.code == 'SUCCESS') {
          this.tableData = response.data.data
          console.log(this.tableData)
        }
      })
    }
  }
}
</script>
<style >
#styAdd {
  margin-top: 20px;
  margin-left: 20px;
}
#styAdd .el-input {
  width: 120px;
}
#styAdd .el-table--medium td {
  padding: 0;
}
#styAdd .el-table--medium th {
  padding: 2px 0;
}
#styAdd .el-dialog__body .el-button + .el-button {
  margin-left: 0px;
}
#styAdd .el-table {
  margin: 20px;
}
#styAdd #mainBox {
  width: 99%;
  border: 1px solid #623f18;
}
#styAdd #mainBox #boxTit {
  height: 40px;
  width: 100%;
  background: #623f18;
}
#styAdd #mainBox #boxTit i {
  cursor: pointer;
  float: right;
  line-height: 40px;
  margin-right: 10px;
  font-size: 25px;
  color: #fff;
}
#styAdd #mainBox #boxTit .tit {
  margin-left: 20px;
  font-size: 20px;
  color: #fff;
  line-height: 40px;
}
</style>
